<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>media.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">media.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    Provides the base goog.ui.Control and goog.ui.ControlRenderer
 for media types, as well as a media model consistent with the Yahoo Media RSS
 specification <a href="http://search.yahoo.com/mrss/">http://search.yahoo.com/mrss/</a>.

 The goog.ui.media.* package is basically a set of goog.ui.ControlRenderers
 subclasses (such as goog.ui.media.Youtube, goog.ui.media.Picasa, etc) that
 should all work with the same goog.ui.Control (goog.ui.media.Media) logic.

 This design guarantees that all different types of medias will behave alike
 (in a base level) but will look different.

 In MVC terms, goog.ui.media.Media is the Controller,
 goog.ui.media.MediaRenderer + CSS definitions are the View and
 <code>goog.ui.media.MediaModel</code> is the data Model. Typically,
 MediaRenderer will be subclassed to provide media specific renderers.
 MediaRenderer subclasses are also responsible for defining the data model.

 This design is strongly patterned after:
 <a href="http://go/closure_control_subclassing">http://go/closure_control_subclassing</a>

 goog.ui.media.MediaRenderer handles the basic common ways to display media,
 such as displaying tooltips, frames, minimize/maximize buttons, play buttons,
 etc. Its subclasses are responsible for rendering media specific DOM
 structures, like youtube flash players, picasa albums, etc.

 goog.ui.media.Media handles the Control of Medias, by listening to events
 and firing the appropriate actions. It knows about the existence of captions,
 minimize/maximize buttons, and takes all the actions needed to change states,
 including delegating the UI actions to MediaRenderers.

 Although MediaRenderer is a base class designed to be subclassed, it can
 be used by itself:

 <pre class="lang-js prettyprint">
 var renderer = new goog.ui.media.MediaRenderer();
 var control = new goog.ui.media.Media('hello world', renderer);
 var control.render(goog.dom.getElement('mediaHolder'));
 </pre>

 It requires a few CSS rules to be defined, which you should use to control
 how the component is displayed. goog.ui.ControlRenderers is very CSS
 intensive, which separates the UI structure (the HTML DOM elements, which is
 created by the <code>goog.ui.media.MediaRenderer</code>) from the UI view (which
 nodes are visible, which aren&amp;#39;t, where they are positioned. These are defined
 on the CSS rules for each state). A few examples of CSS selectors that needs
 to be defined are:

 <ul>
 <li>.goog-ui-media
 <li>.goog-ui-media-hover
 <li>.goog-ui-media-selected
 </li></li></li></ul>

 If you want to have different custom renderers CSS namespaces (eg. you may
 want to show a small thumbnail, or you may want to hide the caption, etc),
 you can do so by using:

 <pre class="lang-js prettyprint">
 var renderer = goog.ui.ControlRenderer.getCustomRenderer(
 goog.ui.media.MediaRenderer, 'my-custom-namespace');
 var media = new goog.ui.media.Media('', renderer);
 media.render(goog.dom.getElement('parent'));
 </pre>

 Which will allow you to set your own .my-custom-namespace-hover,
 .my-custom-namespace-selected CSS selectors.

 NOTE(user): it seems like an overkill to subclass goog.ui.Control instead of
 using a factory, but we wanted to make sure we had more control over the
 events for future media implementations. Since we intent to use it in many
 different places, it makes sense to have a more flexible design that lets us
 control the inner workings of goog.ui.Control.

 TODO(user): implement, as needed, the Media specific state changes UI, such
 as minimize/maximize buttons, expand/close buttons, etc.
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="closure_goog_ui_media_media.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
            <li><a href="http://code.google.com/p/closure-library/source/browse/closure/goog/ui/media/media.js">Git</a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">ui/media/media.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_ui_media_Media.html">
          goog.ui.media.Media</a><br/>
        <div class="class-details">Provides the control mechanism of media types.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_media_MediaRenderer.html">
          goog.ui.media.MediaRenderer</a><br/>
        <div class="class-details">Base class of all media renderers. Provides the common renderer functionality
of medias.

The current common functionality shared by Medias is to have an outer frame
that gets highlighted on mouse hover.

TODO(user): implement more common UI behavior, as needed.

NOTE(user): I am not enjoying how the subclasses are changing their state
through setState() ... maybe provide abstract methods like
goog.ui.media.MediaRenderer.prototype.preview = goog.abstractMethod;
goog.ui.media.MediaRenderer.prototype.play = goog.abstractMethod;
goog.ui.media.MediaRenderer.prototype.minimize = goog.abstractMethod;
goog.ui.media.MediaRenderer.prototype.maximize = goog.abstractMethod;
and call them on this parent class setState ?</div>
 </div>
      
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>









<div class="section">
  <table class="horiz-rule">


  </table>
</div>




  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.media.MediaRenderer.call"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.media.MediaRenderer.</span><span class="entryName">call<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_media_media.js.source.html#line184">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>






      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory media</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="" current="ui/media/media.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
